<template>
  <div>
    <!-- 输入栏和按钮 -->
    <div style=" line-height: 40px;margin-bottom: 4px;height: 40px;">
      <!-- <el-input style="width: 220px; float: left;margin-left: 5px;" placeholder="输入菜单名称" v-model.trim="name"
                @keyup.enter.native="loadMenus(); messageAlert()" suffix-icon="el-icon-search" maxlength="20">
            </el-input>
            <el-button type="primary" style="float: left; margin-left: 5px;" @click="loadMenus(); messageAlert()">搜索
            </el-button>
            <el-button type="warning" style="float: left; margin-left: 10px;" @click="name=''">重置
            </el-button> -->


      <!--  -->
      <!--  -->
      <el-button style="float: right; margin-left: 40px; " type="primary"
        @click="dialogFormVisible = true; form.flag = '0'">
        新增<i class="el-icon-circle-plus-outline" style="padding-left: 5px;"></i></el-button>
      <!--点击新增跳出来的表单被修改按钮也使用  -->

      <el-dialog title="菜单信息" :visible.sync="dialogFormVisible">
        <el-form :model="form" style="margin-left: -60px;">
          <el-form-item label="名称" :label-width="formLabelWidth" required>
            <el-input v-model="form.name" autocomplete="off" maxlength="20" style="width: 500px; float: left;"><i
                slot="prefix" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="路径" :label-width="formLabelWidth" required>
            <el-input v-model="form.path" autocomplete="off" maxlength="20" style="width: 500px; float: left;"><i
                slot="prefix" class="el-icon-s-promotion"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="页面路径" :label-width="formLabelWidth" required>
            <el-input v-model="form.pagePath" autocomplete="off" maxlength="20" style="width: 500px; float: left;"><i
                slot="prefix" class="el-icon-s-promotion"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth" required>
            <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 500px;">
              <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
                <i :class="item.value"></i>{{ ' ' + item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth" required>
            <el-input v-model="form.description" autocomplete="off" maxlength="20" style="width: 500px; float: left;">
              <i slot="prefix" class="el-icon-user"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false;
                    handFlag()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div style="height: 90%;padding-top: 0px;padding-bottom: 5px;margin-top: 10px;">
      <!-- 表格 -->
      <el-table :data="tableData" stripe :header-cell-class-name="headerStyle" v-loading="loading"
        @selection-change="handSelectChange" row-key="id" default-expand-all border :cell-style="cellStyle">
        <el-table-column prop="id" label="ID" width=""></el-table-column>
        <el-table-column prop="name" label="名称" width=""></el-table-column>
        <el-table-column prop="path" label="路径" width=""></el-table-column>
        <el-table-column prop="pagePath" label="页面路径" width=""></el-table-column>
        <el-table-column prop="icon" label="图标" width="" class-name="fontSize20">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" width=""></el-table-column>
        <el-table-column label="操作" width="250">

          <!--slot-scope="scope"一个添加条件 叫做插槽;  -->
          <template slot-scope="scope">
            <el-button type="text" v-if="!scope.row.pid && !scope.row.path"
              @click="dialogFormVisible = true; form.flag = '2'; form.pid = scope.row.id">添加子菜单
            </el-button>
            <el-button type="text" @click="dialogFormVisible = true; fillMenuData(scope.row); form.flag = '1'">
              编辑
            </el-button>
            <!-- 删除按钮，弹出框提醒 Popconfirm 气泡确认框，Popover 弹出框不成功-->
            <el-popconfirm title="确定删除该权限吗？" icon-color="red" @confirm="deleteMenu(scope.row.id)">
              <!-- <el-button slot="reference" type="text">删除</el-button> -->
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
    </div>

  </div>

</template>

<script>
  export default {
    name: 'Menu',
    data() {
      return {
        tableData: [], //页面数据

        //关键字查询
        name: '',
        //表格加载图片
        loading: true,

        tableRowClassName: 'tableRowClassName',

        // 弹出框提醒
        visible: false,

        // 新增表单信息
        dialogFormVisible: false,
        form: {
          flag: '0', //如果是0点击表单就是添加方法,如果是1就是修改方法，如果是2就是添加子菜单
          name: '',
          path: '',
          icon: '',
          description: '',
          pid: '',
          pagePath: '',
        },
        formLabelWidth: '200px',

        // 多选情况
        multipleSelection: [],

        options: [],
      }
    },

    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadMenus();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.loadMenus();
      },
      headerStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return 'tableStyle'
      },
      //获得后台users数据
      loadMenus() {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.get('/menu/menus')
          .then(function (response) {
            //获得数据之后取消加载页面 
            that.loading = false;
            that.tableData = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },
      // 消息提醒方法
      messageAlert() {
        this.$message({
          message: '查询成功！',
          type: 'success',
          duration: 1600
        });
      },
      messageAlert2() {
        this.$message({
          message: '提交成功',
          type: 'success',
          duration: 1600
        });
      },
      messageAlert3() {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1600
        });
      },

      //多选处理
      handSelectChange(val) {
        // 把选择的数字赋值data
        this.multipleSelection = val;
      },

      //提交表单
      submitForm() {
        const that = this;
        that.loading = true;
        this.$axios.post('/menu/save', {
            name: that.form.name,
            description: that.form.description,
            path: that.form.path,
            icon: that.form.icon,
            pagePath: that.form.pagePath,
          })
          .then(function (response) {
            //重新加载数据
            that.loadMenus();
            that.messageAlert2();
            // 清除数据
            that.form.name = '';
            that.form.description = '';
            that.form.path = '';
            that.form.icon = '';
          })
          .catch(function (error) {
            console.log(error);
          })
      },

      // 删除用户
      deleteMenu(id) {
        // 获得数据之前加载加载页面
        const that = this;
        that.loading = true;
        this.$axios.delete('/menu/deleteMenu', {
            params: {
              id: id
            }
          })
          .then(function (response) {
            that.loadMenus();
            that.messageAlert3();
          })
          .catch(function (error) {
            console.log(error);
          })
      },

      fillMenuData(menu) {
        this.form.name = menu.name;
        this.form.path = menu.path;
        this.form.icon = menu.icon;
        this.form.pagePath = menu.pagePath;
        //请求icon
        const that = this;
        this.$axios.get('/menu/icons')
          .then(function (response) {
            that.options = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          })
        this.form.description = menu.description;
        this.form.flag = '1'; //提交表单为修改操作
        this.form.id = menu.id;
      },

      updateMenu() {
        const that = this;
        that.loading = true;
        this.$axios.post('/menu/update', {
            name: that.form.name,
            path: that.form.path,
            icon: that.form.icon,
            description: that.form.description,
            id: that.form.id,
            pagePath: that.form.pagePath,
          })
          .then(function (response) {
            //重新加载数据
            that.loadMenus();
            that.$message({
              message: '修改成功',
              type: 'success',
              duration: 1600
            });
            // 清除数据
            that.form.name = '';
            that.form.path = '';
            that.form.icon = '';
            that.form.description = '';
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
      },
      addChild() {
        const that = this;
        that.loading = true;
        this.$axios.post('/menu/save', {
            name: that.form.name,
            description: that.form.description,
            path: that.form.path,
            icon: that.form.icon,
            pid: that.form.pid,
          })
          .then(function (response) {
            //重新加载数据
            that.loadMenus();
            that.messageAlert2();
            // 清除数据
            that.form.name = '';
            that.form.path = '';
            that.form.icon = '';
            that.form.description = '';
          })
          .catch(function (error) {
            console.log(error);
          })
      },
      handFlag() {
        console.log(this.form.flag);
        if (this.form.flag === '0') {
          this.submitForm();
        } else if (this.form.flag === '1') {
          this.updateMenu();
        } else {
          this.addChild();
        }
      },

      cellStyle() {
        return {
          'font-size': '14px',
          height: '30px',
          padding: '0'
        }
      },
    },

    created() {
      //以下代码也可以封装在函数中，在其他地方调用
      // 然而问题是出来了this.tableData因为用了 function 函数 的原因，
      // 在函数里面，this是指向函数本身，已经不是外部的默认this了
      this.loadMenus();
      const that = this;
      this.$axios.get('/menu/icons')
        .then(function (response) {
          that.options = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        })
    },
  }

</script>

<style>
  .tableStyle {
    background-color: rgb(236, 236, 236) !important;
    color: rgb(0, 0, 0);
    font-weight: 500;
    font-size: medium;
  }

  .fontSize20 {
    font-size: 20px;
  }

</style>
